<template>
	<view class="wanl-order-list">
		<scroll-view :scroll-left="scrollLeft" scroll-x="true" class="navbar bg-white fixed">
			<view class="nav-item text-df margin-lr" v-for="(item, index) in navList" :key="index"
				:class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
				{{ item.text.length > 4 ? item.text.replace('订单','') :  item.text}}
			</view>
		</scroll-view>
		<wanl-scroll-list ref="list"
			:option="{ page: 1, auto: true, safeArea: true ,emptyImage:$wanlshop.oss('/uploads/20230922/bf1554b8b3aef7aed61e0b36f2ca8e55.jpg') }"
			@load="load($event,'load')" @refresh="load($event,'refresh')" style="padding-top: 80rpx;">
			<view class="tab-content" v-if="navList[tabCurrentIndex].state != 'goods'">
				<!-- 订单列表 -->
				<view v-for="(order, okey) in orderList" :key="okey" class="order-item radius-bock">

					<view class="head">
						<view class="shop wanl-gray">
							<text class="wanl-gray text-df">服务单号:{{order.refund_sn}} </text>
						</view>
						<!-- <view class="text-xs transfer_text" v-if="order.is_transfer_text">
							<text class="state">{{order.is_transfer_text}}</text>
						</view> -->
					</view>
					<!-- 商品 -->

					<view class="goods-box" v-if="order.product">
						<view class="cu-avatar xl margin-right-bj radius"
							:style="{backgroundImage: 'url('+$wanlshop.oss(order.product.image, 70, 70)+')'}"> </view>
						<view class="content margin-right-bj">
							<view class="describe">
								<view class="text-cut-2">
									{{order.product.title}}
								</view>
								<view class="flex align-center justify-between">
									<view class="wanl_sku text-min">
										<!-- <text class="wanl-gray-dark">111</text> -->
									</view>
									<view class="wanl-red text-min flex align-center justify-end"
										style="line-height: 30rpx;">
										<view>退款金额：</view>
										<view class="text-sm">¥{{order.product.price}}</view>
									</view>
								</view>
								<view v-if="order.order_type == 'reservation'"
									class="wanl-gray-dark text-min flex align-center justify-end"
									style="line-height: 30rpx;">
									<view>预约时间：</view>
									<view class="text-sm">{{goods.date}}</view>
								</view>
							</view>
						</view>
					</view>


					<view class="goods-box" v-for="(goods, gkey) in order.goods" :key="goods.id"
						@tap="goodsDe(order,goods.id)">
						<view class="cu-avatar xl margin-right-bj radius"
							:style="{backgroundImage: 'url('+$wanlshop.oss(goods.image, 70, 70)+')'}"> </view>
						<view class="content margin-right-bj">
							<view class="describe">
								<view class="text-cut-2">
									{{goods.name}}
								</view>
								<view class="flex align-center justify-between">
									<view class="wanl_sku text-min">
										<text class="wanl-gray-dark">{{order.order_type_text}}</text>
									</view>
									<view class="wanl-red text-min flex align-center justify-end"
										style="line-height: 30rpx;">
										<view>退款金额：</view>
										<view class="text-sm">¥{{order.refund_money}}</view>
									</view>
								</view>
								<view v-if="order.order_type == 'reservation'"
									class="wanl-gray-dark text-min flex align-center justify-end"
									style="line-height: 30rpx;">
									<view>预约时间：</view>
									<view class="text-sm">{{goods.date}}</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 底部 -->
					<view class="price-box text-sm flex" @tap="toDetails(order)">
						<text>{{order.status_text}}</text>
						<text>{{stateList[order.state]}}</text>
					</view>
				</view>
			</view>
			<view class="tab-content" v-if="navList[tabCurrentIndex].state == 'goods'">
				<view class="order-item radius-bock" v-for="(item, index) in orderList" :key="item.id">
					<view class="head">
						<view class="shop wanl-gray" @tap="onShop(item.shop.id)">
							<text class="wlIcon-dianpu1 wanl-black"></text>
							<text class="wanl-black margin-lr-xs text-30">{{item.shop.shopname}}</text>
							<text class="wlIcon-fanhuigengduo text-sm"></text>
						</view>
						<view class="margin-right-bj text-lg">
							<text class="wanl-orange wlIcon-tuikuan margin-right-xs text-bold"></text>
							<text class="text-sm">{{item.type_text}}</text>
						</view>
					</view>
					<!-- 商品 -->
					<view class="goods-box" @tap="onRefund(item.id)">
						<view class="cu-avatar xl margin-right-bj radius"
							:style="{backgroundImage: 'url('+$wanlshop.oss(item.goods.image, 70, 70)+')'}"> </view>
						<view class="content margin-right-bj">
							<view class="describe">
								<view class="text-cut-2 wanl-black">
									{{item.goods.title}}
								</view>
								<view class="text-sm margin-top-xs wanl-gray-light">
									{{item.goods.difference}}
								</view>
								<view class="text-sm margin-top-xs wanl-black">
									退款：<text class="text-price">{{item.price}}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 底部 -->
					<view class="bg-bgcolor padding-bj margin-tb-bj margin-right-bj radius text-cente wanl-gray-light">
						<text class="margin-lr-bj wanl-black">{{getStateText(item.state)}}</text>
						{{getStateInfo(item.state)}}
					</view>
					<!-- 1.0.2升级 售后列表完成退款项目显示关闭按钮 -->
					<view class="action-box padding-bottom-bj">
						<button class="cu-btn round line-black"
							v-if="item.state == 0 || item.state == 1 || item.state == 2 || item.state == 3 || item.state == 6"
							@tap="closeRefund(index)">关闭退款</button>
						<button class="cu-btn round margin-lr-bj line-orange" @tap="onRefund(item.id)">查看详情</button>
					</view>
				</view>

			</view>
		</wanl-scroll-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// `state` 退款状态:0=申请退款,1=卖家同意,2=卖家拒绝,3=申请平台介入,4=成功退款,5=退款已关闭,6=已提交物流,7=第三方退款中,8=退款失败',
				stateList: ['申请退款，请等待卖家审核', '卖家同意，请填写物流信息', '卖家拒绝', '申请平台介入', '成功退款', '退款已关闭，感谢您对我们的支持', '已提交物流，等待商家收货',
					'第三方退款中', '退款失败'
				],
				scrollLeft: 0,
				tabCurrentIndex: 0,

				orderList: [],
				navList: [{
						state: 'goods',
						text: '商城',
						http: '/wanlshop/refund/refundList'
					},
					// {
					// 	state: 'groups',
					// 	text: '团购订单',
					// 	http:'/addons/homeking/api.refund/lists'
					// },
					{
						state: 'homeking',
						text: '家政服务订单',
						http: '/addons/homeking/api.refund/lists'
					},
					{
						state: 'medicalvisit',
						text: '医护上门订单',
						http: '/addons/medicalvisit/api.refund/lists'
					},
					{
						state: 'accompany',
						text: '陪诊陪护订单',
						http: '/addons/accompany/api.refund/refundList'
					},
					{
						state: 'nursing',
						text: '医养院订单',
						http: '/addons/nursing/api.refund/lists'
					},
					{
						state: 'internethospital',
						text: '在线问诊订单',
						http: '/addons/internethospital/api.refund/lists'
					}
					// {
					// 	state: 'reservation',
					// 	text: '预约挂号订单'
					// }
				],
				type: ''
			};
		},
		watch: {
			tabCurrentIndex(newValue, oldValue) {
				if (this.navList.length > 0) {
					this.type = this.navList[newValue].state;
				}
			}
		},
		async onLoad(options) {
			this.type = options.s
			// this.tabCurrentIndex = options.s
		},
		methods: {
			load(paging, key) {
				console.log('哈哈')
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;
				uni.request({
					url: navItem.http,
					method: 'POST',
					data: {
						order_type: state,
						page: paging.page
					},
					success: res => {
						let orderList = res.data.data
						if (key == 'load') {
							this.orderList = [...this.orderList, ...orderList];
							this.$refs.list.loadSuccess({
								list: this.orderList,
								total: res.data.total
							});
						} else if (key == 'refresh') {
							this.orderList = orderList;
							this.$refs.list.refreshSuccess({
								list: orderList,
								total: res.data.total
							});
						}
					}
				});
			},
			// 关闭退款
			async closeRefund(index) {
				let refund = this.dataList[index];
				await uni.request({
					url: '/wanlshop/refund/closeRefund',
					data: {
						id: refund.id
					},
					success: res => {
						this.$store.commit('statistics/order', {
							customer: this.$store.state.statistics.order.customer - 1
						});
						refund.state = 5;
						this.$wanlshop.msg('退款已关闭');
					}
				});
			},
			getStateText(state) {
				return ["等待卖家同意", "等待买家退货", "卖家拒绝退款", "平台介入", "退款完成", "退款关闭", "等待卖家签收退货", "退款中", "退款失败"][state];
			},
			getStateInfo(state) {
				return ["成功发起退款等待卖家同意", "卖家已同意，请退货", "您可以修改退货申请再次发起", "已申请平台介入，请等待平台判定", "退款完成", "您已关闭退款申请",
					"等待商家收到货物并退款给您", "第三方支付退款中将在24小时内原路返还", "第三方退款失败，请联系商家"
				][state];
			},
			onRefund(id) {
				this.$wanlshop.to(`/pages/user/refund/detail?id=${id}`);
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.scrollLeft = index * uni.upx2px(120)
				this.$refs.list.refreshScrollView()
				this.load({
					page: 1
				}, 'refresh')
			},

			toDetails(order) {
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				this.$wanlshop.to(`/pages/user/order/detail?sn=${order.refund_sn}&type=${navItem.state}&id=${order.id}`)
			},
			goodsDe(order, id) {
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				switch (navItem.state) {
					case 'goods':
						this.$wanlshop.to(`/pages/product/goods?id=${id}`)
						break;
					case 'groups':
						this.$wanlshop.to(`/pages/apps/groups/goods?id=${id}`)
						break;
					case 'homeking':
						this.$wanlshop.to(`/pages/medicalcare/homemaking/product?id=${id}`)
						break;
					case 'medicalvisit':
						this.$wanlshop.to(`/pages/medicalcare/visit/product?id=${id}`)
						break;
					case 'accompany':
						this.$wanlshop.to(`/pages/medicalcare/accompany/product?id=${id}`)
						break;
					default:
						break;
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	page {
		height: 100%;
	}

	.navbar {
		display: flex;
		justify-content: flex-start;
		white-space: nowrap;

		.nav-item {
			display: inline-flex;
			width: 120rpx !important;
		}
	}

	.bg {
		color: #fff;
		border-radius: 6rpx;
		font-size: 22rpx;
		padding: 4rpx;
	}

	.bg0 {
		background-color: #e19c28;
	}

	.bg1 {
		background-color: #4b8aef;
	}

	.bg2 {
		background-color: #66bb9d;
	}

	.bg3 {
		background-color: #dd5749;
	}

	.bg4 {
		background-color: #66bb9d;
	}

	.bg5 {
		background-color: #444c69;
	}

	.color1 {
		color: #444c69;
	}

	.color2 {
		color: #66bb9d;
	}

	.color3 {
		color: #dd5749;
	}

	.wanl-red {
		color: #b04a40;
	}

	.order-item {
		padding: 0 25rpx;
		margin-top: 0;
		margin-bottom: 25rpx;

		.head {
			border-bottom: 1px solid #f6f6f6;
		}
	}

	.transfer_text {
		background-image: linear-gradient(#fbf3d6, #f7eeb2);
		color: #af8c47;
		font-weight: bold;
		border-radius: 50rpx;
		padding: 6rpx 20rpx;
	}

	.price-box {
		background-color: #f6f6f6;
		margin: 25rpx 0;
		padding: 20rpx !important;
		justify-content: flex-start !important;
		border-radius: 10rpx;

		text {
			&:nth-child(1) {
				margin-right: 40rpx;
			}

			&:nth-child(2) {
				font-size: 24rpx;
				color: #666;
			}
		}
	}

	.empty-view {
		margin: auto;
		display: flex;
		align-items: center;
		flex-direction: column;
	}
</style>